<template>
	<div class="thePage flex-column">
		<div class="pg-title-dark">学生管理</div>
		
		<div class="serachKeywords flex-between">
			<cube-input class="flex-1" v-model="keywords" placeholder="输入要查询的姓名或学号"></cube-input>
			<i class="iconfont icon-sousuotianchong"></i>			
		</div>	
		
		<div class="b-line-half line"></div>
		
		<div class="list overflow-y">
			<div class="item-box flex-column" v-for="(item, i) in listData" :key="i">
			<div class="flex-between">
				<div class="item-left flex-column flex-center ">
					<img class="avatar" :src="item.avatar || defaultAvatar"></img>
					<div>
						{{item.name}}
					</div>
					<div>
						{{item.number}}
					</div>
				</div>
				<div class="item-right flex-column flex-1">
					<div class="b-line-half">						
						班级：	{{item.class}}						
					</div>
					<div class="flex-between b-line-half" >
						<div class="">
							实习状态：
						</div>
						<cube-select class="flex-1"
						  v-model="item.practiceStatus"
						  :options="optionsPracticeStatus">
						</cube-select>
					</div>
					
					<div class="flex-between b-line-half">
						<div class="">
							个人状态：
						</div>
						<cube-select class="flex-1"
						  v-model="item.personStatus"
						  :options="optionsPersonStatus">
						</cube-select>
					</div>				
					
				</div>
			</div>			
		</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'StudentList',
	data() {
		return {
			defaultAvatar:require("@/pics/default_avatar.png"),			
			keywords: '',
			optionsPracticeStatus: [{value:1,text:"专升本"},{value:2,text:"未实习"},{value:3,text:"正在实习"},{value:4,text:"延迟毕业"},{value:5,text:"不是本院学生"}],
			optionsPersonStatus: [{value:1,text:"正常"},{value:2,text:"不正常"}], //还有什么选项 
						
			listData: [
				{
					name: '王某1',
					number: '2018080101',
					avatar: '',					
					class: '18数媒四',
					remark: '',
					practiceStatus: 1,	// 
					personStatus: 1,	// 
				},
				{
					name: '王某2',
					number: '2018080101',
					avatar: '',					
					class: '18数媒四',
					remark: '',
					practiceStatus: 1,	// 
					personStatus: 1,	// 
				},
				{
					name: '王某3',
					number: '2018080101',
					avatar: '',					
					class: '18数媒四',
					remark: '',
					practiceStatus: 1,	// 
					personStatus: 1,	// 
				},
				{
					name: '王某4',
					number: '2018080101',
					avatar: '',					
					class: '18数媒四',
					remark: '',
					practiceStatus: 1,	// 
					personStatus: 1,	// 
				},
				{
					name: '王某5',
					number: '2018080101',
					avatar: '',					
					class: '18数媒四',
					remark: '',
					practiceStatus: 1,	// 
					personStatus: 1,	// 
				},	
				{
					name: '王某5',
					number: '2018080101',
					avatar: '',					
					class: '18数媒四',
					remark: '',
					practiceStatus: 1,	// 
					personStatus: 1,	// 
				},			
				{
					name: '王某5',
					number: '2018080101',
					avatar: '',					
					class: '18数媒四',
					remark: '',
					practiceStatus: 1,	// 
					personStatus: 1,	// 
				},			
			],			
		};
	},	

	methods: {		
	
	}
};
</script>

<style lang="less" scoped>
.thePage {

	.line{
		margin: 20px 30px 0 30px;
	}
	.list{
		margin: 10px 20px;
	}
}

.item-left{
	padding: 0 10px;
	font-size: 12px;
}
.item-right{	
	padding: 0 20px;
	font-size: 13px;		
}

.cube-select{
	&::after{
		border: none;
	}
}
</style>
